<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
    <title>zoomEffect jQuery plugin</title>
    <link rel="stylesheet" href="styles/style.css">
    <link href='http://fonts.googleapis.com/css?family=Wire+One&v1' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Jura&v1' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="header">
    <h1>zoomEffect</h1>
    <h2>jQuery Plugin</h2>
    <ul id="info">
        <li><label>Author:</label>Mauro Gadaleta</li>
        <li><label>Twitter:</label><a href="http://twitter.com/#!/zazoomauro">#zazoomauro</a></li>
        <li><label>Version:</label>0.2</li>
        <li><label>Download:</label><a href="http://code.google.com/p/jquery-zoom-effect/downloads/list">http://code.google.com/p/jquery-zoom-effect/downloads/list</a></li>
        <li><label>Source Code:</label><a href="http://code.google.com/p/jquery-zoom-effect/source/browse/">http://code.google.com/p/jquery-zoom-effect/source/browse/</a></li>
        <li><label>Licence:</label>GNU GPL v3</li>
    </ul>
    <ul id="nav">
        <li><a href="#introduction">Introduction</a></li>
        <li><a href="#getting_started">Getting Started</a></li>
        <li><a href="#configuration">Configuration</a></li>
        <li><a href="#examples">Examples</a></li>
        <li><a href="#credits">Credits</a></li>
    </ul>
</div>
<div id="introduction">
    <h3>Introduction</h3>
    <p>
        zoomEffect is a jQuery plugin for zoom items in list.
        The items, which can be static HTML content or loaded with (or without) AJAX, can be zoomed.
    </p>
</div>
<div id="getting_started">
    <h3>Getting Started</h3>
    <p>
        To use the zoomEffect component, include the jQuery library and the zoomEffect source file inside the <code>&lt;head&gt;</code> tag of your HTML document:
    </p>
<pre>
&lt;script type="text/javascript" src="/path/to/jquery-1.6.1.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="/path/to/jquery.zoomEffect.min.js"&gt;&lt;/script&gt;
</pre>
    <p>
        In your HTML file should create lists or items with the same class name. Example:
    </p>
<pre>
&lt;ul id="icons"&gt;
    &lt;li id="icon1" class="icon"&gt;&lt;/li&gt;
    &lt;li id="icon2" class="icon"&gt;&lt;/li&gt;
    &lt;li id="icon3" class="icon"&gt;&lt;/li&gt;
&lt;/ul&gt;
</pre>
    <p>
        In your css you will assign an image to these elements as follows:
    </p>
<pre>
#icons #icon1 { background-image: url("path/to/icon1.jpg"); }
#icons #icon2 { background-image: url("path/to/icon2.jpg"); }
#icons #icon3 { background-image: url("path/to/icon3.jpg"); }
</pre>
    <p>
        Finally, in your javascript file, we must give those objects the plugin zoomEffect:
    </p>
<pre>
jQuery(document).ready(function(){
    $(".icon").zoomEffect();
});
</pre>
</div>
<div id="configuration">
    <h3>Configuration</h3>
    <p>
        Supports 5 configuration parameters:
    </p>
    <ul>
        <li>timeAnimationZoomIn: time effect Zoom In <b>(default: 150)</b></li>
        <li>timeAnimationZoomOut: time effect Zoom Out <b>(default: 150)</b></li>
        <li>scalePercentage: scaling percentage (10%, 20%, etc...) <b>(default: 10)</b></li>
        <li>
            zoomAnchor: establish what position do the scaling
            <ul>
                <li>CENTER (default): <code>$.fn.zoomEffect.ANCHORCENTER</code></li>
                <li>TOP LEFT: <code>$.fn.zoomEffect.ANCHORTOPLEFT</code></li>
                <li>TOP RIGHT: <code>$.fn.zoomEffect.ANCHORTOPRIGHT</code></li>
                <li>BOTTOM LEFT: <code>$.fn.zoomEffect.ANCHORBOTTOMLEFT</code></li>
                <li>BOTTOM RIGHT: <code>$.fn.zoomEffect.ANCHORBOTTOMRIGHT</code></li>
            </ul>
        </li>
        <li>
            externalControls: an external component is to take the zoom
            <ul>
                <li>enabled: <code>true</code> or <code>false</code> (default: false)</li>
                <li>elements: jQuery element (default: undefined)</li>
            </ul>
        </li>
    </ul>
<pre>
$(".icon").zoomEffect({
    timeAnimationZoomIn: 150,
    timeAnimationZoomIn: 150,
    scalePercentage: 10,
    zoomAnchor: $.fn.zoomEffect.ANCHORCENTER,
    externalControls: {
        enabled: true,
        elements: $('.elements')
    }
});
</pre>
</div>
<div id="examples">
    <h3>Examples</h3>
    <ul>
        <li><a href="examples/dock/">Zoom Effect Like Mac Dock</a></li>
        <li><a href="examples/gallery/">Zoom Effect Gallery Image Width External Controls</a></li>
    </ul>
</div>
<div id="credits">
    <h3>Credits</h3>
    <ul>
        <li>Code Assist: Miguel Angel García (<a href="http://twitter.com/#!/tribadelics" target="_blank">Twitter</a>)</li>
        <li>Images for examples: ~Stinky9 (<a href="http://stinky9.deviantart.com/" target="_blank">http://stinky9.deviantart.com/</a>)</li>
    </ul>
</div>
<div id="footer">
</div>
</body>
</html>